<template>
  <a-row :gutter="10">
    <a-col :md="24" :sm="24" style="margin-bottom: 20px">
      <a-card :bordered="false">

        <!-- 模板管理 -->
        <div>
          <a-row type="flex" :gutter="16">
            <a-col flex="auto">
              <div class="TaskManagement_right_top_header_box">
                <div class="icon_box">
                  <i class="iconfont icon-yueyongdianliangbili"></i>
                </div>
                <div class="TaskManagement_right_top_header_box_name">
                  <div class="name_val" style="margin-left: 10px;">模板管理</div>
                </div>
              </div>
              <!--  -->
              <!-- 新建模板 -->

              <a-form class="form_" layout="inline" @keyup.enter.native="searchQuery" style="margin: 0px 0px;">
                <a-row :gutter="24">

                  <a-col :span="1">
                    <div class="table-page-search-submitButtons" style="margin: 0 0 15px 10px;">
                      <a-button type="primary" icon="plus" @click="addTask" style="margin-left: 20px;">新建模板</a-button>
                    </div>
                  </a-col>

                  <a-col :span="4">
                    <a-form-item>
                      <a-tooltip :trigger="['focus']" placement="bottomLeft" overlay-class-name="numeric-input">

                        <template slot="title"> 请输入模板查询 </template>
                        <a-input placeholder="请输入模板查询" v-model="queryParam.username"  style="margin-left: 25px;"></a-input>
                      </a-tooltip>
                    </a-form-item>
                  </a-col>

                  <a-col :span="4">
                    <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                      <a-button @click="search" icon="search">查询</a-button>
                      <a-button class="last" @click="searchReset" icon="reload">重置</a-button>
                    </span>
                  </a-col>
                </a-row>
              </a-form>


              <!-- 表格 -->
              <a-table style=" height: 600px;padding-left: 10px;" :columns="columns" :dataSource="dataSource"
                :pagination="ipagination" :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">
                <!-- 操作 -->
                <span slot="action" slot-scope="text,record">
                  <!-- 修改 -->
                  <a v-if="record.action.includes('edit')" class="action-btn" @click="editTask(record)">修改</a>
                  <!-- 删除 -->
                  <a-popconfirm style="margin: 0 20px;" ok-text="确定" cancel-text="取消" @confirm="confirm(record)"
                    @cancel="cancel" v-if="record.action.includes('del')">
                    <template slot="title">
                      <p>你确定要删除这条数据吗?</p>
                    </template>
                    <a class="action-btn">删除</a>
                  </a-popconfirm>
                </span>
              </a-table>
            </a-col>
          </a-row>
        </div>
        <!-- 表格 -->
        <!-- <a-card :bordered="false" style="margin-top: 15px;">
          <div style="margin: 20px;">

          </div>
        </a-card> -->
        <AddTableTemplate ref="modalForm" @formInfo="formInfoColumn"></AddTableTemplate>
      </a-card>
    </a-col>
  </a-row>
</template>


<script>

import axios from 'axios'
import AddTableTemplate from './AddTableTemplate'
import { ListMixin } from "@/mixins/ListMixin";

export default {
  name: '',
  mixins: [ListMixin],
  data() {
    return {
      queryParam: {
        username: ''
      },

      loading: true,
      columns: [],
      dataSource: [],
      selectedRowKeys: [],
      visible: false,
      lengthInfo: 0,

      // 分页器
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
        tabAryLength: '',
        current: 0
      },
    }
  },
  components: {
    AddTableTemplate
  },
  mounted() {
    // 表头数据
    this.templateColumns()
    // 表格数据
    this.templateTabdta()

    this.$bus.$on('currentTab', (current) => {
      this.current = current
      console.log(current, '传递的序号')
    })
  },

  watch: {
    'queryParam.username'(newVal, oldVal) {
      if (newVal.length < oldVal.length || newVal === '') {
        this.templateTabdta()
      }
    }
  },


  methods: {

    // 查询
    search() {
      console.log(this.queryParam.username, '获取ingjiejfejf///')
      if (this.queryParam.username == '') {
        this.templateTabdta()
      } else {
        this.dataSource = this.dataSource.filter(item => {
          // console.log(item, 'chaxunchaudifej////')
          return item.name.includes(this.queryParam.username)
        })
      }

    },

    // 删除成功
    confirm(record) {
      console.log(record)
      this.dataSource = this.dataSource.filter((item) => {
        return item.serialNumber !== record.serialNumber
      })
      // this.dataSource.splice(record, 1)
      // console.log(res,'//aaaaaa')
      this.dataSource.forEach((item, index) => {
        item.serialNumber = index + 1
      })
      this.$message.success('删除成功')
      console.log(this.dataSource.length, '/////长度')
      this.tabAryLength = this.dataSource.length
      this.$bus.$emit('tabAryLength', this.tabAryLength)

    },

    // 取消删除
    cancel() {
      this.$message.error('取消删除')

    },
    // 获取表头数据
    templateColumns() {
      this.$nextTick(async () => {
        const result = await axios.get('/mock/templateManagementColumns')
        this.columns = result.data.data
        // console.log(result, '模拟表头数据------------')
      })
    },

    // 获取表格数据
    templateTabdta() {
      this.$nextTick(async () => {
        const result = await axios.get('/mock/templateManagementTabdata')
        this.dataSource = result.data.data
        this.lengthInfo = this.dataSource.length
        // console.log(result, '模拟表格数据------------')
        this.$bus.$emit('getLength', this.lengthInfo)
      })
    },
    // 点击新建模板
    addTask() {
      // let res = {name:'请输入内容'}
      this.$refs.modalForm.add(_, 1)

    },
    // 获取数组长度

    // 点击修改
    editTask(res) {
      console.log(res, '////resresres')

      this.$refs.modalForm.add(res, 2)

    },
    // 点击确定的回调  popconfirm
    // confirm() { },

    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },

    // 接收子组件的参数
    formInfoColumn(formInfo) {
      console.log(formInfo, '接收子组件参数//////////')
      if (formInfo.type == 1) {

        formInfo.serialNumber = this.tabAryLength ? this.tabAryLength += 1 : this.lengthInfo += 1
        this.dataSource.push(formInfo)
      } else if (formInfo.type == 2) {
        let indexs = ''
        this.dataSource.forEach((item, index) => {
          if (item.serialNumber == formInfo.serialNumber) {
            indexs = index
          }
        })

        let res = this.dataSource.findIndex(item => item.serialNumber == formInfo.serialNumber)
        console.log(res)
        if (res !== -1) {
          this.dataSource.splice(indexs, 1, formInfo)
        }
      }

      console.log(this.dataSource, 'this.columnsthis.columnsthis.columns////////')
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/css/listcommon.scss';

.tabStyle {

  // display: flex;
  .table-page-search-submitButtons {}
}

/* @import '~@assets/less/common.less'; */
/** Button按钮间距 */
.ant-btn,
.action-btn {
  margin-left: 8px;

  &:first-child {
    margin-left: 0;
  }
}

::v-deep .ant-table .ant-table-body .ant-table-thead .ant-table-selection-column {
  text-align: center !important;
}

::v-deep .ant-table-thead>tr>th .anticon-filter,
.ant-table-thead>tr>th .ant-table-filter-icon {
  left: 60px !important;
}

.breadcrumb {
  padding: 10px 15px;
  border: 1px solid #eee;
  margin-bottom: 15px;
}

.table-page-search-submitButtons .ant-btn {
  border: 1px solid rgb(209, 208, 208) !important;
}

.table-page-search-submitButtons .ant-btn-primary {
  // color: #fff !important;
  color: #fff !important;
  background: #1890ff !important;
}

::v-deep .ant-spin-container .ant-pagination.mini .ant-pagination-total-text {
  position: absolute;
  left: 0;
}

.table-page-search-wrapper .header_right {
  justify-content: flex-start;
}

:deep .ant-badge-status-error {
  //background-color:rgba($color: #000000, $alpha: 0);
  display: none !important;
}

:deep .ant-badge-status-processing {
  display: none !important;
}

:deep .ant-badge-status-success {
  display: none !important;
}

.TaskManagement_left_top_name {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 60px;
  margin: 0px 0px;
  background-color: #f3f3f3;
  //background-color: #f3f3f3;
  // margin-bottom: 10px;

  // .icon_box {
  //   width: 40px;
  //   height: 40px;
  //   background: #4bc076;
  //   border-radius: 10px;
  //   margin-left: 10px;

  //   i {
  //     color: #fff;
  //     font-size: 26px;
  //     padding-top: 15px;
  //   }
  // }

  .name {
    margin-left: 6px;
    font-size: 18px;
    font-weight: 600;
  }
}

.TaskManagement_right_top_header_box {
  display: flex;
  flex-direction: row;
  padding: 10px 0;
  margin-left: 10px;
  align-items: center;
  // background-color: #f3f3f3;
  border-radius: 5px 5px 0 0;

  .icon_box {
    position: relative;
    width: 30px;
    height: 30px;
    background: linear-gradient(rgb(1, 209, 180), rgb(0, 194, 167));
    border-radius: 5px;
    // margin-right: 10px;
    margin: 10px 0;

    i {
      color: #fff;
      font-size: 20px;
      padding-top: 15px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -65%);
    }
  }

  .TaskManagement_right_top_header_box_name {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;

    .name {
      font-size: 14px;
    }

    .name_val {
      font-size: 18px;
      font-weight: 600;
    }
  }

  .ant-row-flex {}
}
</style>
